<template>
	<div class="trainPay train">
		<trainHeader :name="title" :btn="btn" @btnClick="cancel" @returnClick="returnClick"></trainHeader>
		<div v-show="isShow">
			<!--抢票提示和倒计时-->
			<div v-if="ticketType && message" class="">
				<div class="trainPay_rob_tip" v-if="message.fontFlag">
					因您选择坐席价位不一致，您需要支付价格最高的坐席费用，抢票成功后，1-3个工作日内将退还差价至您的账户。
				</div>
				<div class="trainPay_rob_time" :class="{active:!message.fontFlag}" v-if="payFlag">
					<div>请在<span>{{time.min}}分{{time.s}}秒</span>内完成支付，否则系统将取消本次交易~</div>
				</div>
				<div class="trainPay_rob_time" :class="{active:!message.fontFlag}" v-else>
					<div>您未在规定时间内完成支付，订单已取消~</div>
				</div>
			</div>
			<!--倒计时-->
			<div class="trainPay_time" v-else>
				<img src="http://h5.kpcx179.com/wximages/train/shijian@2x.png" alt="" />
				<div v-if="payFlag">占座成功，请在<span>{{time.min}}分{{time.s}}秒</span>内完成支付</div>
				<div v-else>您未在规定时间内完成支付，订单已取消~</div>
			</div>
			<!--取票码-->
			<div class="trainPay_ticketNo" v-if="message && !ticketType" v-show="isChangeMoney">
				取票码：{{message.ticketNo}}
			</div>
			<!--车次详情-->
			<trainlistdetails :msg="message" :departureDate="message.departureDate" v-if="message"></trainlistdetails>
			<!--乘客-->
			<div class="trainOccupyingSeat_passengers" v-if="message">
				<div v-for="item in message.passengers" class="trainOccupyingSeat_passenger" :class="{'active':!item.seatNo}">
					<div>
						<div class="trainOccupyingSeat_name">
							<span>{{item.passengerName}}</span>
							<em v-if="item.passengerType == 2" class="child">儿童票</em>
							<em v-if="item.passengerType == 3">学生票</em>
						</div>
						<div class="color">￥{{item.ticketPrice}}</div>
					</div>
					<div class="trainOccupyingSeat_seatClassName" v-if="item.seatNo">
						<span>{{item.seatClassName}}</span>
						<span>{{item.seatNo}}</span>
					</div>
					<div class="color font">
						{{message.orderStateCode | getOrderStateCode}}
					</div>
					<div class="trainOccupyingSeat_circle left"></div>
					<div class="trainOccupyingSeat_circle right"></div>
				</div>
			</div>
			<!--返现提示-->
			<div class="trainPay_CashBackMoney_tip" v-if="HCCashBackFlag && CashBackMoney" v-show="(CashBackMoney.isExceedLimit != '0') && (CashBackMoney.cashBackLimit>0)">
				温馨提示：您当天返现金额（含本订单待返）超过{{CashBackMoney.cashBackLimit}}元，该订单返现金额会相应的调整变化。
			</div>
			<!--改签提示-->
			<div class="trainPay_change_tip" v-if="isChangTicket && message" v-show="isChangeMoney">
				<div class="trainPay_change_title">
					支付新票款：<span>{{message.pay_money}}元</span>，退还原票款(不含优惠券)：<span>{{message.oldTicketPrice}}元</span>
				</div>
				<div class="trainPay_change_content">
					提示：如果您的名下带有儿童，改签将连同儿童票一起改签，需要支付儿童票的票款，因非同时改签，儿童票可能会改签失败，儿童改签成功后将退款原票款。
				</div>
			</div>
			<!--抢票任务-->
			<div v-if="message && ticketType">
				<div class="trainPay_rob_task" v-if="message.multiTicketTime || message.multiTrainNo || message.multiSeatClass">
					<div class="trainPay_rob_content">
						<div class="trainPay_rob_header">
							抢票任务
						</div>
						<div class="trainPay_rob_message">
							<div v-if="message.multiTicketTime">
								<span class="trainPay_rob_title">备选日期</span>
								<span class="trainPay_rob_content_message">{{message.multiTicketTime | multiTicketTime}}</span>
							</div>
							<div v-if="message.multiTrainNo">
								<span class="trainPay_rob_title">备选车次</span>
								<span class="trainPay_rob_content_message">{{message.multiTrainNo | multiTrainNo}}</span>
							</div>
							<div v-if="message.multiSeatClass">
								<span class="trainPay_rob_title">备选坐席</span>
								<span class="trainPay_rob_content_message">{{message.multiSeatClass | multiSeatClass}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--支付方式-->
			<div class="trainPay_payMode" v-if="isChangeMoney">
				<div class="trainPay_payMode_content">
					<div class="trainPay_payMode_header">
						支付方式
					</div>
					<div class="trainPay_payMode_message">
						<div @click="payMode = 0">
							<div class="trainPay_payMode_logo">
								<img src="../../../assets/wx-pay.png" alt="" />
								<span>微信支付</span>
							</div>
							<div class="trainPay_payMode_choose">
								<img src="../../../assets/train/yuan-weixuanze@2x.png" alt="" v-if="payMode"/>
								<img src="../../../assets/yixuan-lv.png" alt="" v-else/>
							</div>
						</div>
						<!--<div @click="payMode = 1">
							<div class="trainPay_payMode_logo">
								<img src="../../../assets/zfb-pay.png" alt="" />
								<span>支付宝支付</span>
							</div>
							<div class="trainPay_payMode_choose">
								<img src="../../../assets/yixuan-lv.png" alt="" v-if="payMode"/>
								<img src="../../../assets/train/yuan-weixuanze@2x.png" alt="" v-else/>
							</div>
						</div>-->
					</div>
				</div>
			</div>
			<!--底部价格-->
			<div class="fillOrder_bottom" @touchmove.prevent :class="{zIndex:maskFlag}" v-if="message && isChangeMoney">
				<div class="fillOrder_bottom_priceMessage" v-if="maskFlag">
					<div>
						<span>总费用</span>
						<span class="fillOrder_bottom_price">￥{{message.pay_money + message.couponPrice}}</span>
					</div>
					<div>
						<span>车票</span>
						<span class="fillOrder_bottom_price">￥{{message.ticketPrice}}</span>
					</div>
					<div v-if="ticketType"> 
						<span>抢票套餐</span>
						<span class="fillOrder_bottom_price">￥{{message.grabMoney*message.passengers.length}}</span>
					</div>
					<div>
						<span>优惠券</span>
						<span class="fillOrder_bottom_price">￥{{message.couponPrice}}</span>
					</div>
					<div v-if="insuranceFlag && !ticketType">
						<span>行程保险</span>
						<span class="fillOrder_bottom_price">￥{{message.insurePrice || 0}}</span>
					</div>
					<div v-if="!ticketType">
						<span>出行套餐</span>
						<span class="fillOrder_bottom_price">￥{{message.speedIssueFee}}</span>
					</div>
				</div>
				<!--抢票提示-->
				<div class="fillOrder_bottom_tip" v-show="!maskFlag" v-if="ticketType && message.childFlag">
					温馨提示：儿童票暂收成人票价，抢票成功后，1-3个工作日内将退还差价至您的账号~
				</div>
				<div class="fillOrder_bottom_footer">
					<div>
						<span class="fillOrder_bottom_priceAll">订单总额：</span>
						<span class="fillOrder_bottom_price">￥{{message.pay_money}}元</span>
					</div>
					<div class="fillOrder_bottom_box">
						<div class="fillOrder_bottom_all" @click="maskClick" v-if="!isChangTicket">
							<span>明细</span>
							<img src="http://h5.kpcx179.com/wximages/train/zhankai-xiangshang@2x.png" alt="" v-show="maskFlag" />
							<img src="http://h5.kpcx179.com/wximages/train/zhankai@2x.png" alt="" v-show="!maskFlag" />
						</div>
						<div class="fillOrder_bottom_btn" @click="submit" v-if="payFlag">
							<span v-if="isChangTicket">改签支付</span>
							<span v-else>立即支付</span>
							<span class="fillOrder_bottom_btn_returnMoney" v-if="HCCashBackFlag && !isChangTicket" v-show="CashBackMoney.CashBackMoney > 0">返{{CashBackMoney.CashBackMoney}}</span>
						</div>
						<div class="fillOrder_bottom_btn active" v-else>
							<span v-if="isChangTicket">改签支付</span>
							<span v-else>立即支付</span>
						</div>
					</div>
				</div>
			</div>
			<!--平改按钮-->
			<div class="trainPay_change_btn" v-if="!isChangeMoney">
				<div @click="change" v-if="payFlag">
					确认改签
				</div>
				<div v-else class="active">
					确认改签
				</div>
			</div>
			<!--弹窗-->
			<trainCancelMask v-show="cancelFlag" @mask='cancelClick' @cancel="cancelOrder" :promptMessage="promptMessage"></trainCancelMask>
			<!--蒙层-->
			<kpmask v-show="maskFlag" @mask="maskClick"></kpmask>
			<!--返回-->
			<div class="trainPay_mask" v-if="isReturnShow" @touchmove.prevent @click="returnClick">
				<div class="trainPay_mask_content" @click.stop >
					<div class="trainPay_mask_title">
						您有待支付订单，返回后将无法继续下单，建议您支付或取消订单后再返回
					</div>
					<div class="trainPay_mask_btn">
						<div @click="returnClick">继续支付</div>
						<div class="trainPay_mask_active" @click="goReturn">继续返回</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainPay {
		padding-bottom: 220px;
	}
	
	.trainOccupyingSeat_passengers {
		padding: 0 16px;
	}
	
	.trainOccupyingSeat_passenger {
		background: #fff;
		height: 220px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 30px;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 10px;
		border-bottom: 2px dashed #b7b7b7;
	}
	
	.trainOccupyingSeat_passenger.active {
		height: 168px;
	}
	
	.trainOccupyingSeat_passenger:last-child{
		border:0;
	}
	
	.trainOccupyingSeat_passenger>div {
		display: flex;
		justify-content: space-between;
		font-size: 32px;
		color: #333;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName {
		justify-content: flex-start;
		font-size: 28px;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName>span {
		margin-right: 15px;
	}
	
	.trainOccupyingSeat_passenger .color {
		font-size: 30px;
		color: #fb6523;
	}
	
	.trainOccupyingSeat_passenger .color.font {
		font-size: 28px;
	}
	
	.trainOccupyingSeat_circle {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #F4F5F9;
		position: absolute;
		top: -13px;
	}
	
	.trainOccupyingSeat_circle.left {
		left: -13px;
	}
	
	.trainOccupyingSeat_circle.right {
		right: -13px;
	}
	
	.trainOccupyingSeat_name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainOccupyingSeat_name>em {
		font-size: 24px;
		color: #fb6523;
		width: 94px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffc2a7;
		font-weight: 700;
		margin-left: 20px;
	}
	
	.trainOccupyingSeat_name>em.child {
		color: #ffffff;
		background-color: #f7c413;
	}
	
	.trainPay_ticketNo {
		padding: 25px 30px;
		font-size: 28px;
		color: #333333;
		padding-bottom: 0;
	}
	
	.trainPay_time {
		width: 100%;
		height: 70px;
		background-color: rgba(255, 208, 187, 0.5);
		font-size: 28px;
		color: #fb6523;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 30px;
		box-sizing: border-box;
	}
	
	.trainPay_time > img {
		width: 40px;
		height: 40px;
		margin-right: 21px;
	}
	
	.trainPay_time span {
		color: #333333;
	}
	
	/*底部价格*/
	
	.fillOrder_bottom {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 299;
	}
	
	.fillOrder_bottom.zIndex {
		z-index: 350;
	}
	
	.fillOrder_bottom_priceMessage>div {
		padding: 0 52px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88px;
		font-size: 26px;
	}
	
	.fillOrder_bottom_price {
		color: rgb(251, 101, 35);
	}
	
	.fillOrder_bottom_footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px;
		box-sizing: border-box;
		width: 100%;
		font-size: 26px;
		height: 98px;
	}
	
	.fillOrder_bottom_footer>div {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32px;
	}
	
	.fillOrder_bottom_priceAll {
		font-size: 24px;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_all {
		font-size: 26px;
		color: #555555;
		margin-right: 15px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_all>img {
		width: 25px;
		height: 12px;
		margin-left: 14px;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_btn {
		background-color: #3bc3c2;
		border-radius: 10px;
		font-size: 32px;
		color: #fafafa;
		padding: 23px 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*提示*/
	
	.fillOrder_bottom_tip {
		background-color: rgba(255, 208, 187, 0.5);
		font-size: 26px;
		color: #fb6523;
		padding: 10px 50px;
		line-height: 40px;
	}
	
	.fillOrder_bottom_btn.active {
		background: #8A8A8A;
	}
	
	.trainPay_payMode {
		margin-top: 40px;
		padding:0 15px;
	}
	
	.trainPay_payMode_content {
		padding: 26px 38px 22px 28px;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;
		/*height: 308px;*/
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.trainPay_payMode_header {
		height: 56px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 32px;
		color: #333333;
		border-bottom: solid 2px #cfcfcf;
		width: 100%;
		box-sizing: border-box;
	}
	
	.trainPay_payMode_message {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 30px;
		flex: 1;
		width: 100%;
	}
	
	.trainPay_payMode_message > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 30px;
		color: #333333;
	}
	
	.trainPay_payMode_message > div > div {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainPay_payMode_logo > img {
		width: 70px;
		height: 70px;
		margin-right: 35px;
	}
	
	.trainPay_payMode_choose > img {
		width: 34px;
		height: 34px;
	}
	
	.trainPay_rob_tip {
		font-size: 28px;
		color: #fb6523;
		padding: 19px 38px;
		background-color: rgba(255, 208, 187, 0.5);
		line-height: 40px;
	}
	
	.trainPay_rob_time {
		width: 100%;
		padding: 15px 38px;
		box-sizing: border-box;
		font-size: 26px;
		color: #fb6523;
		padding-bottom: 0;
	}
	
	.trainPay_rob_time.active{
		background-color: rgba(255, 208, 187, 0.5);
		padding-bottom: 15px;
	}
	
	.trainPay_rob_time span {
		color: #333;
	}
	
	.trainPay_rob_task {
		padding: 19px 15px 46px;
	}
	
	.trainPay_rob_content {
		width: 718px;
		/*height: 389px;*/
		background-color: #ffffff;
		border-radius: 10px;
	}
	
	.trainPay_rob_header {
		font-size: 30px;
		color: #333333;
		padding-left: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 77px;
		border-bottom: 2px solid #e1e1e1;
	}
	
	.trainPay_rob_message {
		padding: 0px 30px;
		width: 100%;
		box-sizing: border-box;
	}
	
	.trainPay_rob_message > div {
		padding: 41px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30px;
		color: #333333;
	}
	
	.trainPay_rob_message > div > span {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 100%;
	}
	
	.trainPay_rob_message > div > .trainPay_rob_title {
		font-size: 30px;
		color: #8a8a8a;
		width: 20%;
	}
	
	.trainPay_rob_content_message {
		width: 70%;
		word-wrap:break-word;
		white-space:pre-wrap;
		line-height: 50px;
	}
	
	/*改签提示*/
	.trainPay_change_tip {
		width: 100%;
		padding: 19px 30px 0;
		box-sizing: border-box;
	}
	
	.trainPay_change_title {
		font-size: 28px;
		color: #8a8a8a;
		margin-bottom: 20px;
		line-height: 30px;
		text-align: center;
	}
	
	.trainPay_change_title > span {
		color: #fb6523;
	}
	
	.trainPay_change_content {
		font-size: 26px;
		color: #b7b7b7;
		line-height: 38px;
	}
	
	.trainPay_change_btn {
		width: 100%;
		padding-bottom: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #F4F5F9;
	}
	
	.trainPay_change_btn > div {
		width: 714px;
		height: 98px;
		background-color: #3bc3c2;
		border-radius: 49px;
		font-size: 36px;
		color: #fefefe;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainPay_change_btn > div.active {
		background: #8A8A8A;
	}
	
	.trainPay_mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.75);
		z-index: 350;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainPay_mask_content {
		width: 650px;
		height: 310px;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border-radius: 15px;
	}
	
	.trainPay_mask_title {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		color: #333333;
		padding: 0 42px;
		text-align: center;
		line-height: 65px;
	}
	
	.trainPay_mask_btn {
		height: 95px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2px solid #EBEBEB;
	}
	
	.trainPay_mask_btn > div {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #333333;
		height: 100%;
	}
	
	.trainPay_mask_btn > .trainPay_mask_active {
		background: #43BFA4;
		color: #fff;
		border-radius: 0 0 15px 0;
	}
	
	.trainPay_CashBackMoney_tip {
		font-size: 28px;
		margin: 40px 16px;
		padding: 20px;
		background-color: #F8E0D6;
		color: #D37841;
		border-radius: 10px;
		line-height: 40px;
	}
	
	.fillOrder_bottom_box > .fillOrder_bottom_btn > .fillOrder_bottom_btn_returnMoney {
		font-size: 20px;
		padding: 5px 10px;
		background: #FB6523;
		border-radius: 16px;
		margin-left: 10px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import trainCancelMask from "../../../components/trainCancelMask"; //弹窗 //层级350
	import trainlistdetails from "../../../components/trainListDetails"; //详情
	import kpmask from "../../../components/kpmask"; //蒙层 //层级300
	export default {
		name: "trainPay",
		data() { //数据
			return {
				isShow:false,//页面是否展示
				isChangTicket:"",//是否为改签
				isChangeMoney:true,//平改还是差价改 false为平改
				cancelFlag:false,//取消订单弹框
				orderNum:"",//订单号
				message:null,//订单信息
				orderType:"3",//订单类型
				time:{ //倒计时
					min:29,
					s:59,
				},
				timer:null,//定时器
				payFlag:true,//是否可以支付
				maskFlag:false,//蒙层展示
				ticketType:0,//车票类型
				insuranceFlag:0,//保险开关
				payMode:0,//支付方式 0微信 1支付宝
				ip:"",//IP地址
				title:"",//页面标题
				btn:"",//按钮名称
				isReturnShow:false,//返回弹框
				promptMessage:"",//弹框提示信息
				CashBackMoney:null,//返现信息
				HCCashBackFlag:false,//返现开关
			}
		},
		watch: { //监听放置
			payFlag(){
				this.payFlag || this.$alert('支付超时，该订单已失效', {
					title: '提示',
					yes: {},
				}).then(() => {}).catch(() => {});
			},
			isChangTicket(){ //改签
				this.title = this.isChangTicket ? "改签支付" : "订单支付";
				this.btn = this.isChangTicket ? "取消改签" : "取消订单";
				var str = this.isChangTicket ? "改签" : "";
				this.promptMessage = "一天内3次取消" + str + "订单后，当日将不能在12306继续购票！"
			},
		},
		mounted() {
			localStorage.getItem("openid") || this.getOpenId();
			this.isChangTicket = Boolean(Number(this.$route.query.changedType));//改签确定
			this.insuranceFlag = Number(this.$store.state.train.trainStore.insuranceFlag); //保险开关（0关 1开）
			this.orderNum = this.$route.query.orderNum || "";//订单号
			this.orderType = this.$route.query.orderType || "3";//订单类型
			this.ticketType = (this.orderType == "3") ? 0 : 1;//抢票判断
			this.getIp();//获取Ip地址
			this.getCashBackMoneyMessage();//获取返现信息
			if (this.$store.state.train.trainStore.HCCashBackFlag) { //获取返现开关
				this.HCCashBackFlag = Boolean(Number(this.$store.state.train.trainStore.HCCashBackFlag)); //返现开关
			} else {
				this.getInsurance();
			};
		},
		created() {
			
		},
		methods: {
			getOpenId(){ //获取openId
				if(!this.$publicMethod.WeChatFlag) return;
	 			var code = this.$publicMethod.getQueryString("code");
	 			if(code){
	 				var param = '{"code":"' + code + '","ex":""}';
//	 				this.$http.post(this.$baseUrl.baseurl + 'KPCX/appActivityLogin/getUserInfo', param).then((res) => {
	 				this.$http.post(this.$baseUrl.baseurl + 'kpcx/wx/getUserInfo', param).then((res) => {
	 					if(res.data.Code == "0") {
	 						this.userInfo = res.data.Result.userInfo;
	 						localStorage.setItem('openid',this.userInfo.openid);
	 					} else { //code失效重新获取
		 					var url = encodeURIComponent(this.$baseUrl.domainName + '/trainPay?orderNum=' + this.orderNum + "&changedType=" + this.changedType + "&orderType=" + this.orderType);
		 					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
		 						url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
	 					};
	 				});
	 			}else{	
 					var url = encodeURIComponent(this.$baseUrl.domainName + '/trainPay?orderNum=' + this.orderNum + "&changedType=" + this.changedType + "&orderType=" + this.orderType);
 					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
 						url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
	 			};
			},
			getInsurance() { //获取保险开关
				this.$http.post(this.$baseUrl.baseurl + "kpcx/switch/getAllSwitch", {
					"switch": "All",
				}).then((res) => {
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.insuranceFlag = res.data.Result.activityInfo.Insure; //存到全局(0关1开)
					trainStore.HCCashBackFlag = res.data.Result.activityInfo.HCCashBack; //返现
					this.HCCashBackFlag = Boolean(Number(res.data.Result.activityInfo.HCCashBack));
					this.$store.commit('TRAINSTORE', trainStore); 
				}).catch((err) => {
					console.log(err);
				});
			},
			cancel(){ //取消订单
				this.cancelFlag = true;
			},
			cancelClick(){//蒙层点击
				this.cancelFlag = false;
			},
			cancelOrder(){ //取消订单
				var url = "tctrain/train/cancelMyOrders";
				var param = {
					orderNo: this.message.orderNo,
			        orderNum: this.message.order_num,
			        orderType: String(this.message.order_type),
				};
				this.isChangTicket && (param.method = "cancelChangeTicket");//改签添加参数
				this.isChangTicket && (url = "tctrain/train/cancelChangeTicket");//改签修改接口地址
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + url, param).then((res) => {
					this.$loading.hide();
					this.$toast("取消成功", {
						durtaion: 200,
						location: 'center',
					});
					var timer = setTimeout(function(){
						clearTimeout(timer);
						this.$router.go(-2);
					}.bind(this),1000);
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getIp() { //获取Ip地址
				this.$loading.show();
				this.$http.get('https://api.ipify.org/').then((res) => {
					this.$loading.hide();
					this.ip = res.data;
					this.getOrder();//获取订单详情
				});
			},
			getOrder(){ //获取订单详情
				var param = {
					orderNum: this.orderNum,
					orderType: this.orderType
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
						message.mainSeatClassName && (message.fontFlag = (message.mainSeatClassName.indexOf("卧") != -1));//是否是卧铺
						(this.isChangTicket) && (this.isChangeMoney = Boolean(message.pay_money));//平改还是高低改
						(this.isChangTicket) && (this.title = this.isChangeMoney ? "确认改签" : "改签支付");//标题
						this.getTraiMessage(message); //单车次查询
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this),2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getTraiMessage(message) { //单车次查询
				var param = {
					trainNo: message.trainNo,
					trainDate: message.trainDate.split(" ")[0].replace(/-/g, ''),
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainNo", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						message.fromPassType = (res.data.Result.fromStation == message.fromStation) ? 0 : 1; //始发站
						message.toPassType = (res.data.Result.toStation == message.toStation) ? 0 : 1; //终点站	
						this.message = message;
						this.getDepartureDate(); //处理组件所需时间数据
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this),2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getDepartureDate() { //处理时间信息 搭建组件所需数据
				this.$loading.show();
				this.message.startDate = this.$publicMethod.getWeek(this.message.departureTime);
				this.message.endDate = this.$publicMethod.getWeek(this.message.arrivalTime);
				this.message.fromTime = this.message.startDate.time;
				this.message.toTime = this.message.endDate.time;
				this.message.departureDate = this.message.trainDate;
				this.message.couponPrice = this.message.coupon_money || 0;
				this.message.ticketPrice = 0; //车票的价格
		        this.message.insurePrice = 0; //保险
		        this.message.passengers.forEach((val) => {
		          this.message.ticketPrice += val.ticketPrice; //车票价格
		          this.message.insurePrice += val.insurePrice; //保险价格
		          (val.passengerType == '2') && (this.message.childFlag = true);//有儿童
		        },this);
				var runTimeSpan = new Date(this.message.arrivalTime.replace(/-/g,"/")).getTime() - new Date(this.message.departureTime.replace(/-/g,"/")).getTime();
				this.message.runTimeSpan = runTimeSpan / (1000 *60);  
				var time = new Date(this.message.latestPayTime.replace(/-/g,"/")).getTime() - new Date(this.message.systemTime.replace(/-/g,"/")).getTime();
				time = time / 1000;
				this.timer = this.$publicMethod.getTimer(time,this);//启动倒计时
				var timer = setTimeout(function(){//一秒以后展示页面
					clearTimeout(timer);
					this.isShow = true;
					this.$loading.hide();
				}.bind(this),1000);
			},
			maskClick(){
				this.maskFlag = !this.maskFlag;
			},
			change(){ //改签订单（平改）
				var param = {
					method: "confirmChangeTicket",
     				orderNo: this.message.orderNo,
      				orderNum: this.message.order_num
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/confirmChangeTicket", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") { //跳完成
						this.$router.push({
							name: 'trainFinish',
							query: {
								outOrderNo:res.data.Result.outOrderNo,
								orderType:this.orderType,
							},
						});
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			submit(){ //支付
				this.payMode ? this.Alipay() : this.getWeChatPay();
			},
			getCashBackMoneyMessage(){ //获取返现信息
				var param = {
				    orderNum: this.orderNum,
			        redEnvelopeType:3,
			        userID: this.$store.state.common.userinfo.userID,
				};
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appOrders/getCashBackMoney", param).then((res) => {
					if(res.data.Code == "0") { //
						var CashBackMoney = res.data.Result.CashBackMoney;
						CashBackMoney = CashBackMoney.toFixed(2);
					    (CashBackMoney.substring(CashBackMoney.length - 1) == 0) && (CashBackMoney = CashBackMoney.substring(0, CashBackMoney.length - 1));
					    res.data.Result.CashBackMoney = CashBackMoney;
					    this.CashBackMoney = res.data.Result;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					console.log(err);
				});
			},
			getWeChatPay(){ //处理微信支付取消的问题
				if (this.$store.state.train.trainStore.WeChatPayMessage && (this.$store.state.train.trainStore.WeChatPayMessage.orderNum == this.orderNum)) {
					this.callForthWeChatPay(this.$store.state.train.trainStore.WeChatPayMessage.result);
				} else {
					this.WeChatPay();
				}
			},
			WeChatPay(){//微信支付
				var param = {
					attach: {
			        	"ticketType": this.orderType,//订单类型
//			        	"type": this.$publicMethod.WeChatFlag ? '1' : '11',
			        	"type": '11',
			        	"userID": "" + this.$store.state.common.userinfo.userID + ""
			      	},
			      	body: encodeURI('快票出行-火车票'),
      				channels: "3",
      				detail: encodeURI(this.message.fromStation) + '-' + encodeURI(this.message.toStation) + '+' + this.message.trainNo,
      				deviceID: '', //设备信息
				    fee_type: 'CNY', //符合ISO 4217标准的三位字母代码，默认人民币：CNY
				    ip: this.ip, //ip
				    model: "", //机型
				    os: '', //版本
				    out_trade_no: this.message.order_num, //本地订单号
				    spbill_create_ip: this.ip, //终端Ip
				    total_fee: Number(this.message.pay_money * 100).toFixed(0), //订单总金额，单位为分
				    trade_type: this.$publicMethod.WeChatFlag ? 'JSAPI' : 'MWEB', //交易类型
				    openid: this.$publicMethod.WeChatFlag ? localStorage.getItem("openid") : "",
				    flag: "12", 
				};
//				console.log(JSON.stringify(param));
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/create/WxCreate", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
						trainStore.WeChatPayMessage = { //存支付信息
							orderNum:this.orderNum,
							result:res.data.Result
						};
						this.$store.commit('TRAINSTORE', trainStore);
						this.callForthWeChatPay(res.data.Result);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			callForthWeChatPay(result){//唤起微信支付
				var that = this;
				if (this.$publicMethod.WeChatFlag) {
					// wx.config({
					// 	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 	appId: 'wx348ec18fec6bf757', // 必填，公众号的唯一标识
					// 	timestamp: result.createTime, // 必填，生成签名的时间戳
					// 	nonceStr: result.nonce_str, // 必填，生成签名的随机串
					// 	signature: result.sign, // 必填，签名
					// 	jsApiList: ["chooseWXPay","translateVoice"] // 必填，需要使用的JS接口列表
					// });
					// wx.ready(function(res) {
					// 	console.log(res)
					// });
					function onBridgeReady() {
						WeixinJSBridge.invoke('getBrandWCPayRequest',  {
//								"appId": "wx348ec18fec6bf757", //公众号名称，由商户传入  wx348ec18fec6bf757   
								"appId": "" + result.appid + "", //公众号名称，由商户传入     
								"timeStamp": "" + result.createTime + "", //时间戳，自1970年以来的秒数     
								"nonceStr": "" + result.nonce_str + "", //随机串     
								"package": "prepay_id=" + result.prepay_id +"",
								"signType": "MD5", //微信签名方式：     
								"paySign": "" + result.sign + "" //微信签名 
						} ,function(res) {
							// WeixinJSBridge.log(res.err_msg);
							if(res.err_msg == "get_brand_wcpay_request:cancel"){
								that.$toast('支付取消');
							}else if(res.err_msg == "get_brand_wcpay_request:ok"){
								var param = { //修改订单状态
									orderNum:that.orderNum,
								};
								that.$loading.show();
								that.$http.post(that.$baseUrl.baseurl + "tctrain/create/updateOrders", param).then((res) => {
									that.$loading.hide();
									that.$router.push({ //页面跳转
										name:"trainFinish",
										query: {
											outOrderNo: that.orderNum,
											orderType:that.orderType,
											CashBackMoney:that.CashBackMoney.CashBackMoney,//返现金额
											isCashBack:that.HCCashBackFlag,//返现开关
										},
									});
								}).catch((err) => {
									that.$loading.hide();
									console.log(err);
								});
							};
						});
					};
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						};
					} else {
						onBridgeReady();
					};
				} else {
					if (result.result_code == "SUCCESS") {
						var url = this.$baseUrl.domainName + '/trainFinish?outOrderNo='+ this.orderNum + '&orderType=' + this.orderType + "&CashBackMoney=" + this.CashBackMoney.CashBackMoney + "&isCashBack=" + this.HCCashBackFlag;
						window.location.href = result.mweb_url + '&redirect_url=' + encodeURIComponent(url);
					} else {
						this.$toast("支付环境异常", {
							durtaion: 200,
							location: 'center',
						});
					};
				};
			},
			Alipay(){//支付宝支付
				console.log("支付宝支付");
			},
			returnClick(){ //返回提示
				this.isReturnShow = !this.isReturnShow;
			},
			goReturn(){//返回
				this.$router.go(-1);
			}
		},
		beforeRouteLeave(to, from, next) {
			clearInterval(this.timer); //清除定时器
			next();
		},
		components: {
			trainHeader,
			trainCancelMask,
			trainlistdetails,
			kpmask
		},
		filters: { //过滤
			getOrderStateCode(code){ //订单状态
		        if (code == "N" || code == "S") {
		          return "待支付";
		        } else if (code == "C" || code == "B") {
		          return "已取消";
		        } else if (code == "T") {
		          return "已退票";
		        } else if (code == "D") {
		          return "抢票中";
		        } else if (code == "G" || code == "E") {
		          return "已改签";
		        } else if (code == "U") {
		          return "退票中";
		        } else if (code == "O"){
		          return "订单已过期";
		        } else{
		          return "已支付"
		        };
			},
			multiTicketTime(ticketTime){
				var arr = ticketTime.split(",");
				var list = [];
				arr.forEach((val)=>{
					list.push(new Date(val.replace(/-/g,"/")).format("MM月dd日"))
				});
				return list.join("，");
			},
			multiTrainNo(trainNo){
				return trainNo.replace(/\|/g,"，");
			},
			multiSeatClass(seatClass){
				return seatClass.replace(/,/g,"，");;
			}
		},	
	};
</script>